<style>
    #shopDetail .box {
        display: flex;
        width: 100%;
        padding: 8px;
    }
    #shopDetail .box .content {
        flex-grow: 1;
        padding: 8px;
        padding-left: 15px;
    }
    #shopDetail .box .content .banner {
        font-size: 16px;
        padding: 8px 5px 8px 0px;
        color: #FF3166;
        font-weight: bolder;
    }
    #shopDetail .box .content .title {
        font-size: 16px;
        color: #333333;
        font-weight: bolder;
    }
    #shopDetail .box .content .price-bar {
        position: relative;
        margin-top: 8px;
        width: 100%;
        font-family: arial;
        z-index: 0;
    }
    #shopDetail .box .content .price-bar .price {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        font-size: 38px;
    }
    #shopDetail .box .content .price-bar .price #reduce {
        font-size: 16px;
        margin-left: 5px;
        text-decoration: line-through;
    }
    #shopDetail .box .content .price-bar .price #reducetext {
        font-size: 16px;
        margin-left: 5px;
    }
    #shopDetail .box .content .price-bar .text {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
    }
    #shopDetail .box .content .details {
        width: 100%;
        font-size: 14px;
        color: #333333;
        margin-top: 10px;
    }
    #shopDetail .box .content .details li {
        height: 35px;
        line-height: 35px;
    }
    #shopDetail .box .content .details li input[type=number] {
        font-size: 18px;
        height: 25px;
    }
    #shopDetail .box .content .details li .block {
        display: block;
        float: left;
        width: 70px;
        height: 26px;
        font-size: 14px;
        text-align: center;
        line-height: 26px;
        border: 1px solid #eee;
        margin-left: 3px;
        padding: 3px 5px;
        cursor: pointer;
    }
    #shopDetail .box .content .details li .block.select {
        border-color: #f00581;
    }
    #shopDetail .box .content .details .option {
        color: #999999;
        margin-right: 8px;
    }
    #shopDetail .box .content .btn-group {
        margin-top: 15px;
        border-radius: 5px;
        font-size: 18px;
    }
    #shopDetail .box .content .btn-group .shopcart {
        width: 113px;
        height: 44px;
        font-family: arial;
        background: #F688A4;
        color: white;
    }
    #shopDetail .box .content .btn-group .buy {
        width: 113px;
        height: 44px;
        font-family: arial;
        background: #F03867;
        color: white;
    }
</style>
<section id="shopDetail" class="bancen">
    <div class="box">
        <!--放大镜-->
        <div class="scope">
            <div class="small-box" style="cursor: crosshair">
                <img src="./static/loading-big.gif">
                <div class="square" style="opacity: 0"></div>
            </div>
            <div class="big-box" style="z-index: 1">
                <img/>
            </div>
        </div>
        <!--文本内容-->
        <div class="content">
            <div class="banner">唯品会</div>
            <div class="title">短袖男装2021春夏新款白色圆领休闲运动T恤</div>
            <div class="price-bar">
                <img src="./static/bg-seconds.png" width="100%">
                <img class="text" src="./static/icon-seconds.png" width="100" height="24">
                <div class="price"><span style="font-size: 24px">￥</span><span id="myprice"></span><span id="reduce"></span><span id="reducetext"></span></div>
            </div>
            <form name="order">
                <ul class="details">
                    <li>
                        <span class="option">运费</span><span>新会员专享首单满38元免邮（限唯品自营商品，部分商品不可用）</span>
                    </li>
                    <li>
                        <span class="option">颜色</span><span>纯色</span>
                    </li>
                    <li style="height: 50px;line-height: 50px;margin-bottom: 5px">
                        <span class="option">数量</span>
                        <input type="number" name="num" value="1" min="1">
                    </li>
                    <span class="option">尺码：</span>
                    <li style="margin-top: 8px">
                        <div class="block select">S</div>
                        <div class="block">M</div>
                        <div class="block">X</div>
                        <div class="block">XL</div>
                    </li>
                    <script>
                        $('.details').on('click', '.block', function () {
                            $('.details .block').removeClass('select')
                            $(this).addClass('select')
                        })
                    </script>
                </ul>
                <div class="btn-group">
                    <button type="button" class="buy">立即下单</button>
                    <button type="button" class="shopcart">添加购物车</button>
                </div>
            </form>
        </div>
    </div>
    <h2>商品推荐</h2>
    <div id="adv"></div>
</section>
<script>
    let scope = new myscope()
    scope.init()
    $(function () {
        let hash = location.hash.split('=')[1]
        hash = JSON.parse(decodeURI(hash))
        renderData(hash)
        shopCart()
        var msg = new Messgebox()
        //渲染数据
        function renderData (hash) {
            console.log(hash)
            //放大镜渲染
            setTimeout(() => {
                $('.small-box img').attr('src', hash.img.replace("529x529","800x800"))
                $('.big-box img').attr('src', hash.img.replace("529x529","1529x1529"))
            }, 500)
            //商品价格+折扣渲染
            $('.content .title').html(hash.name)
            $('#myprice').html(hash.price)
            $('#reduce').html(hash.origin)
            $('#reducetext').html(hash.reduce)
            //打印当前分类
            console.log(hash.type)
            //商品推荐
            axios.get(`./static/api/vip/${hash.type}.json`).then(res => {
                let advance = res.data.data.map(item => `<img width="100%" src="./static/loading-big.gif" data-src="${item.imgsrc}" style="display: block;margin: 0 auto;border: 0.6px solid #ddd">`)
                let randIndex=parseInt(Math.random()*(res.data.data.length-15))
                advance=advance.slice(randIndex,randIndex+10)
                advance=advance.map((item)=>{
                    return item.replace("529x529","2529x2529")
                })
                $('#adv').html(advance.join(""))
                new lazyLoad('#adv img')
            })
        }
        //购物车操作
        function shopCart(){
            $('.shopcart').on("click",function (){
                let json={
                    title:$('.content .title').html(),
                    src:$('.small-box img').attr("src"),
                    count:order.num.value,
                    price:$('#myprice').html()
                }

                let token=getCookie("token")
                if(token==null){
                    msg.show({
                        msg: '请先登录',
                    })
                    return;
                }
                updateView(json)
                updateModel(json)
            })
        }
        function updateModel(json){
            let user={
                token:"",
                shopcarts:[]
            }
            let shopcart=localStorage.getItem("shopcarts")
            let token=getCookie("token")

            shopcart=JSON.parse(shopcart)
            console.warn("数据：",shopcart)
            if(!isHaveUser(shopcart)){
                //初始化用户
                if (shopcart===null){
                    shopcart=[]
                    $('.pink-point').text(1)
                    $('.pointer').text(1)
                }else{
                    shopcart=shopcart
                    $('.pink-point').text(parseInt($('.pink-point').text()+1))
                    $('.pointer').text(parseInt($('.pointer').text()+1))
                }
                user.token=token
                user.shopcarts.push(json)
                shopcart.push(user)

                localStorage.setItem("shopcarts",JSON.stringify(shopcart))
                msg.show({
                    msg: '添加购物车成功',
                })
            }else {
                //如果存在用户就直接加
                for(let i=0;i<shopcart.length;i++){
                    if(shopcart[i].token===token){
                        // console.error("push")
                        shopcart[i].shopcarts.push(json)
                        $('.pink-point').text(shopcart[i].shopcarts.length)
                        $('.pointer').text(shopcart[i].shopcarts.length)
                        localStorage.setItem("shopcarts",JSON.stringify(shopcart))
                        msg.show({
                            msg: '添加购物车成功',
                        })
                        break;
                    }
                }
            }
        }
        function updateView(json){
            $('.qg-content .container').append(`<div class="cart-card">
                <img src="${json.src}" width="150">
                <div class="contain">
                    <div class="title">${json.title}</div>
                    <p class="number"><span>数量：</span>x<span class="num">${json.count}</span></p>
                    <p class="price">${json.price}</p>
                </div>
                <div class="btn-group">
                    <div class="down">-</div>
                    <span class="howmany">${json.count}</span>
                    <div class="up">+</div>
                </div>
            </div>`)
            total()
        }
        //计算价格
        function total(){
            let total=0
            $('.qg-content .cart-card').each((index,item)=>{
                let simple={
                    count:$(item).find(".contain .num").text(),
                    price:$(item).find(".contain .price").text()
                }
                total+=simple.count*simple.price
            })
            $(".total .price").html(total)
        }
        //判断用户是否存在
        function isHaveUser(shopcart){
            let bool=false
            let token=getCookie("token")
            if (shopcart===null){
                return bool
            }
            shopcart.forEach((item)=>{
                if(item.token===token){
                    bool=true
                    return;
                }
            })
            return bool;
        }
    })
</script>